<!DOCTYPE html>
<html lang="en" style="overflow-y:hidden">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/statics/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/statics/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/statics/plugins/jqgrid/ui.jqgrid-bootstrap.css}">
    <link rel="stylesheet" th:href="@{/statics/plugins/ztree/css/metroStyle/metroStyle.css}">
    <link rel="stylesheet" th:href="@{/statics/css/main.css}">

    <script th:src="@{/statics/libs/jquery.min.js}"></script>
    <script th:src="@{/editor-app/libs/jquery-ui-1.10.3.custom.min.js}"></script>
    <script th:src="@{/statics/plugins/jsPlumb/jquery.jsplumb.js}"></script>
    <script th:src="@{/statics/plugins/jsPlumb/fieldLine.js}"></script>
    <script th:src="@{/statics/libs/vue.min.js}"></script>
    <style>

        .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th{
            padding: 3px 6px;
            font-size: 10px;
            line-height: 12px;
        }
    </style>
</head>
<body>
<div id="rrapp" v-cloak style="height: 100%;">
    <div style="float:left;width: 30%">
        <table id="leftList" class="ui-jqgrid-htable ui-common-table table table-bordered" style="margin-bottom: unset">
            <thead>
            <tr class="ui-jqgrid-labels"><th class="ui-th-column ui-th-ltr">字段</th><th class="ui-th-column ui-th-ltr">类型</th></tr>
            </thead>
            <tbody>
            <tr v-for="option in sourceFieldList" class="jqgfirstrow"
                v-bind:originalName="option.name"
                v-bind:originalType="option.type"
                v-bind:originalIndex="option.index"
                v-bind:originalValue="option.value"
                v-bind:name="option.name.toLowerCase()">
                <td>{{ option.name }}</td>
                <td>{{ option.type }}</td>
            </tr>
            </tbody>
        </table>
    </div>

    <div style="float:left;width: 30%;margin-left: 20%">
        <table id="rightList" class="ui-jqgrid-htable ui-common-table table table-bordered" style="margin-bottom: unset">
            <thead>
            <tr class="ui-jqgrid-labels"><th class="ui-th-column ui-th-ltr">字段</th><th class="ui-th-column ui-th-ltr">类型</th></tr>
            </thead>
            <tbody>
            <tr v-for="option in targetFieldList"
                v-bind:originalName="option.name"
                v-bind:originalType="option.type"
                v-bind:originalIndex="option.index"
                v-bind:originalValue="option.value"
                v-bind:name="option.name.toLowerCase()">
                <td>{{ option.name }}</td>
                <td>{{ option.type }}</td>
            </tr>
            </tbody>
        </table>
    </div>

    <div style="float:left;width: 20%;text-align: center">
        <div><input type="button" value="同名映射" @click="nameMapping" class="btn btn-info" style="margin: 5px"/></div>
        <div><input type="button" value="恢复默认" @click="defaultMapping" class="btn btn-success" style="margin: 5px"/></div>
        <div><input type="button" value="取消映射" @click="clearMapping" class="btn btn-danger" style="margin: 5px"/></div>
    </div>
</div>

<script>
    var vm = new Vue({
        el: '#rrapp',
        data: {
            sourceFieldList: [],
            targetFieldList: [],
            sortModel: 0 // 0.默认；1.同名映射；2.清除模式
        },
        watch:{
            sourceFieldList: function() {
                this.$nextTick(function(){
                    jsPlumb.ready(function () {
                        jsPlumb.setContainer('rrapp');
                        // 重置点位
                        vm.resetJsPlumb();
                        /**
                         * 画线策略
                         */
                        if(vm.sortModel == 0){
                            //默认模式
                            if(parent.vm.sync.sourceField.length > 0 && (parent.vm.sync.sourceField.length == parent.vm.sync.targetField.length)){
                                $.each(parent.vm.sync.sourceField, function(index, item){
                                    jsPlumb.connect({ uuids: ['left_' + item.name.toLowerCase(), 'right_' + parent.vm.sync.targetField[index].name.toLowerCase()] });
                                });
                                return;
                            }
                        }
                        if(vm.sortModel == 1){
                            // 同名映射
                            $.each(vm.sourceFieldList, function(index, item){
                                jsPlumb.connect({ uuids: ['left_' + item.name.toLowerCase(), 'right_' + item.name.toLowerCase()] });
                            });
                        }
                    })
                })
            }
        },
        methods: {
            resetJsPlumb: function(){
                jsPlumb.reset();

                var leftTd = $("#leftList").find("tbody tr");
                var rightTd = $("#rightList").find("tbody tr");
                $.each(leftTd, function(index, item){
                    var uuid = 'left_' + item.getAttribute("name");
                    jsPlumb.addEndpoint(item, {
                        anchors: ['Right'],
                        uuid: uuid
                    }, config.sourceStyle)
                });

                $.each(rightTd, function(index, item){
                    jsPlumb.addEndpoint(item, {
                        anchor: 'Left',
                        uuid: 'right_' + item.getAttribute("name")
                    }, config.targetStyle)
                });
            },
            getConnection: function(){
                var fields = jsPlumb.getAllConnections();
                var sourceField = [];
                var targetField = [];
                $.each(fields, function(index, item){
                    sourceField.push({
                        "name":item.source.getAttribute("originalName"),
                        "type": item.source.getAttribute("originalType"),
                        "index": item.source.getAttribute("originalIndex"),
                        "value": item.source.getAttribute("originalValue")
                    });
                    targetField.push({
                        "name":item.target.getAttribute("originalName"),
                        "type": item.target.getAttribute("originalType"),
                        "index": item.target.getAttribute("originalIndex"),
                        "value": item.target.getAttribute("originalValue")
                    });
                });
                return {source: sourceField,target: targetField};
            },
            clearMapping: function(){
                vm.sortModel = 2;
                vm.resetJsPlumb();
            },
            defaultMapping: function(){
                vm.sortModel = 0;
                vm.sourceFieldList = parent.vm.sourceFieldList;
                vm.targetFieldList = parent.vm.targetFieldList;
            },
            nameMapping: function(event){
                vm.sortModel = 1;
                var leftTrNew = [];
                var rightTrNew = [];
                $.each(vm.sourceFieldList, function(index, item){
                    for(var i=0;i<vm.targetFieldList.length;i++){
                        if(item.name.toLowerCase() == vm.targetFieldList[i].name.toLowerCase()){
                            leftTrNew.push(item);
                            rightTrNew.push(vm.targetFieldList[i]);
                            break;
                        }
                    }

                });
                $.each(vm.sourceFieldList, function(index, item){
                    var isExist = false;
                    for(var i=0;i<leftTrNew.length;i++){
                        if(item.name.toLowerCase() == leftTrNew[i].name.toLowerCase()){
                            isExist = true;
                            break;
                        }
                    }
                    if(!isExist){
                        leftTrNew.push(item);
                    }
                });
                $.each(vm.targetFieldList, function(index, item){
                    var isExist = false;
                    for(var i=0;i<rightTrNew.length;i++){
                        if(item.name.toLowerCase() == rightTrNew[i].name.toLowerCase()){
                            isExist = true;
                            break;
                        }
                    }
                    if(!isExist){
                        rightTrNew.push(item);
                    }
                });
                vm.sourceFieldList=leftTrNew;
                vm.targetFieldList=rightTrNew;
            }
        }
    });

    $(function(){
        vm.sourceFieldList = parent.vm.sourceFieldList;
        vm.targetFieldList = parent.vm.targetFieldList;
    });
</script>
</body>
</html>